<template>

    <div id="commodity">
        <el-table :data="tableData"  style="width: 100%;margin-left: 20%;margin-top:10% " isCollapse="false">
            <el-table-column prop="img" label="兔子用品" width="400" align="center" >
                <template v-slot:default="scope">
                    <el-image :src="scope.row.img"/>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="用品名称" width="150" />
        </el-table>
    </div>

</template>
<script>
export default {
    data(){
    return{
        tableData:[
            {
                name:'高原新鲜兔草',
                img:'../static/img/4.jpg'
                    },
            // {
            //     name:'兔保暖窝',
            //     img:'https://ytc-testoss.oss-cn-shenzhen.aliyuncs.com/rabbit/5.jpg'
            // },
            {
                name:'洗澡套餐',
                img: '../static/img/1.png'
             },
            {
                name:'洗脚套餐',
                img:'../static/img/2.png'
            },
            {
                name:'磨牙棒50多根',
                img:'../static/img/3.png'
            },
        ],
        methods:{

        }

    }

}

}

 </script>

<style scoped>
  /deep/.el-collapse-item__header{
    background-color: #0000005e;
    color: #FFFFFF;
    padding-left: 50px;
    font-size: 15px;
  }
  /deep/.el-collapse-item__wrap{
    background-color: #0000005e;
  }
  /deep/.MochiBox .MochiContent{
    background: #f7f7f7;
  }
  @import url("Commodity.css");
</style>
